<template>
  <el-row style="width: 100%">
    <el-col :span="16">
      <el-input
        v-model="searchData"
        size="default"
        :placeholder="placeholder || '请输入搜索内容'"
        :prefix-icon="prefixIcon"
      />
    </el-col>
    <el-col :span="8">
      <el-button type="primary" size="default" :icon="Search" plain @click="onClick">
        检索
      </el-button>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { cloneDeep } from 'lodash-es';

const props = defineProps({
  // modelValue: {
  //   type: [
  //     String,
  //     Array,
  //     Number
  //   ],
  //   default: null
  // },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: undefined
  },
  width: {
    type: String,
    default: undefined
  },
  prefixIcon: {
    type: String,
    default: undefined
  }
});

const emits = defineEmits(['search']);
const searchData = ref('');
const onClick = () => {
  emits('search', cloneDeep(searchData.value));
};
</script>
<style scoped lang="scss">
.div-class {
  margin: 20px;
  height: 50px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  align-items: center;
}
.row-class {
  height: 100%;

  > el-col {
    display: flex;
    text-align: center;
  }
}
</style>
